/**
 * 扩展el-table
 * 列宽, 单元格自适应, auto width fit columns
 * import KzTable form '@/component/kz-table
 * 默认标签名是el-table
 * 重载el-table
 * Vue.use(KzTable)
 * 或者
 * Vue.use(KzTable, {
 *    table: 'KzTable',
 *     column: 'KzTableColumn'
 * })
 * 
 */

/**
 * all columns auto-fit
 * add auto-fit-column and fit-styles
 * 
 * <el-table :data="data" border auto-fit-column :fit-styles="styles">
    <el-table-column label="姓名2222" prop="name" fixed></el-table-column>
    <el-table-column label="年龄3333" prop="age"></el-table-column>
    <el-table-column v-for="(option, index) in options" :label="option.label" :prop="option.prop"
                     :key="index" sortable auto-fit></el-table-column>
    <el-table-column label="年龄" width="100">
      <template slot="header" slot-scope="slot">
        <el-input v-model="search" size="mini" placeholder="Type to search"/>
      </template>
    </el-table-column>
  </el-table>
 */

/**
 * max-width
 * 
 * <el-table :data="data" border auto-fit-column>
    <el-table-column label="姓名2222" prop="name" fixed></el-table-column>
    <el-table-column label="年龄3333" prop="age" :max-width="130"></el-table-column>
    <el-table-column v-for="(option, index) in options" :label="option.label" :prop="option.prop"
                        :key="index" :max-width="100" sortable auto-fit></el-table-column>
    <el-table-column label="年龄" width="100">
        <template slot="header">
            <el-input v-model="search" size="mini" placeholder="Type to search"/>
        </template>
    </el-table-column>
</el-table>
*/

/**
 * add attribute max-width, not support v-buind
 * <el-table-column v-for="(option, index) in options" :label="option.label" :prop="option.prop"
                    :key="index" max-width="100"></el-table-column>
 */

/**
 * use table-column
 * 
 * import kzTableColumn from './src/table-column'
    Vue.component(kzTableColumn.name, kzTableColumn)

    <el-table-column v-for="(option, index) in options" :label="option.label"
                    :prop="option.prop" :key="index" :max-width="maxWidth"></el-table-column>
    export default {
        data () {
            return {
                options: [],
                styles: {
                    header: 'font-size: 14px; font-weight: bold; padding: 0 10px;',
                    body: 'font-size: 14px; padding: 0 10px;'
                }
            }
        }
    }
 */

/**
 * add auto-fit-column 、 fit-styles and fit-columns
<el-table 
    :data="data"
    border
    auto-fit-column
    :fit-styles="styles"
    :fit-columns="fitColumns"
  >
    <el-table-column
      label="Name"
      prop="name"
      fixed
    ></el-table-column>
    <el-table-column
      label="Age"
      prop="age"
    ></el-table-column>
    <el-table-column
      label="Salary"
      prop="salary"
      :formatter="formatter"
    ></el-table-column>
    <el-table-column
      v-for="(option, index) in options"
      :label="option.label"
      :prop="option.prop"
      :key="index"
      sortable
      auto-fit
    ></el-table-column>
    <el-table-column
      label="年龄"
      width="100"
    >
      <template slot="header" slot-scope="slot">
        <el-input
          v-model="search"
          size="mini"
          placeholder="Type to search"/>
      </template>
    </el-table-column>
  </el-table>
 export default {
  data () {
    return {
      options: [],
      styles: {
        header: 'font-size: 14px; font-weight: bold; padding: 0 10px;',
        body: 'font-size: 14px; padding: 0 10px;'
      },
      fitColumns: ['name', 'age', 'salary']
    }
  }
}
 */

import Vue from 'vue';
import KzTable from './table';
import KzTableColumn from './table-column';

KzTable.install = (vue, {
    table = 'ElTable',
    column = 'ElTableColumn'
} = {}) => {
    Vue.component(table || KzTable.name, KzTable);
    Vue.component(column || KzTableColumn.name, KzTableColumn);
}

export {
    KzTable,
    KzTableColumn
}

export default KzTable;
